<nz-card class="descent-addedit-wrap mine-form-align">
  <!-- 基本信息 -->
  <p class="title-p">基本信息</p>
  <div class="addedit-item">
    <!-- 活动类型 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>活动类型</nz-form-label>
      <nz-form-control nz-col nzFlex="1">
        <nz-radio-group
          [(ngModel)]="formParams.type"
          (ngModelChange)="typeRadioChange($event)"
          [nzDisabled]="[1, 2].includes(formParams.status) && routerParams.type == 1">
          <label nz-radio [nzValue]="1">满减</label>
          <label nz-radio [nzValue]="2">满折</label>
          <label nz-radio [nzValue]="3">多件折扣</label>
          <label nz-radio [nzValue]="4">多件立减</label>
          <label nz-radio [nzValue]="5">阶梯满减</label>
          <label nz-radio [nzValue]="6">阶梯折扣</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <!-- 活动名称 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>活动名称</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <input nz-input maxlength="10" placeholder="请输入，仅内部可见" [(ngModel)]="formParams.name"/>
      </nz-form-control>
    </nz-form-item>
    <!-- 前端标题 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>前端标题</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <input nz-input maxlength="20" placeholder="请输入，用户前端可见" [(ngModel)]="formParams.showCopy"/>
      </nz-form-control>
    </nz-form-item>
    <!-- 备注 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px">备注</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <textarea
          style="height: 100px;"
          nz-input
          maxlength="100"
          placeholder="仅内部可见"
          [(ngModel)]="formParams.remark"
        ></textarea>
      </nz-form-control>
    </nz-form-item>

    <!-- 优惠门槛 -->
    <nz-form-item *ngIf="[1, 2].includes(formParams.type)">
      <nz-form-label nz-col nzFlex="120px" nzRequired>优惠门槛</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        订单满
        <nz-input-number
          [nzMin]="1"
          [nzMax]="100000"
          [nzPrecision]="0"
          [nzStep]="1"
          [(ngModel)]="formParams.orderLimitMoney"
          (nzBlur)="discountLimitChange(0)"
        ></nz-input-number>
        可用
      </nz-form-control>
    </nz-form-item>

    <!-- ************************************** 满减 ************************************** -->
    <!-- 减免额度 -->
    <nz-form-item *ngIf="formParams.type == 1">
      <nz-form-label nz-col nzFlex="120px" nzRequired>减免额度</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <nz-input-number
          [nzMin]="1"
          [nzMax]="10000"
          [nzPrecision]="0"
          [nzStep]="1"
          [(ngModel)]="formParams.limitSmall"
          (nzBlur)="discountLimitChange(1)"
        ></nz-input-number>
        元
      </nz-form-control>
    </nz-form-item>
    <!-- 倍数减免 -->
    <nz-form-item *ngIf="formParams.type == 1">
      <nz-form-label nz-col nzFlex="120px" nzRequired>倍数减免</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.overlayFlag">
          <label nz-radio nzValue="0">否</label>
          <label nz-radio nzValue="1">是</label>
        </nz-radio-group>
        <i
          class="tip-i"
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          nz-tooltip
          nzTooltipPlacement="right"
          nzTooltipTitle="例如满300减30，满600减60"
        ></i>
      </nz-form-control>
    </nz-form-item>
    <!-- ************************************** 满减 ************************************** -->

    <!-- ************************************** 折扣 ************************************** -->
    <!-- 折扣力度 -->
    <nz-form-item *ngIf="formParams.type == 2">
      <nz-form-label nz-col nzFlex="120px" nzRequired>折扣力度</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        打
        <nz-input-number
          [nzMin]="0.1"
          [nzMax]="9.9"
          [nzPrecision]="1"
          [nzStep]="0.1"
          [(ngModel)]="formParams.limitSmall"
        ></nz-input-number>
        折
      </nz-form-control>
    </nz-form-item>
    <!-- 最高减免金额 -->
    <nz-form-item *ngIf="formParams.type == 2">
      <nz-form-label nz-col nzFlex="120px" nzRequired>最高减免金额</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <nz-input-number
          [nzMin]="1"
          [nzMax]="100000"
          [nzPrecision]="0"
          [nzStep]="1"
          [(ngModel)]="formParams.limitBig"
        ></nz-input-number>
        元
      </nz-form-control>
    </nz-form-item>
    <!-- ************************************** 折扣 ************************************** -->

    <!-- ************************************** 优惠内容 折扣 or 立减 ************************************** -->
    <!-- 优惠内容 -->
    <nz-form-item *ngIf="[3, 4, 5, 6].includes(formParams.type)">
      <nz-form-label nz-col nzFlex="120px" nzRequired>优惠内容</nz-form-label>
      <nz-form-control nz-col nzFlex="500px">
        <nz-table
          #editRowTable
          nzBordered
          nzSize="small"
          [nzShowPagination]="false"
          [nzFooter]="discountTable?.length < 5 ? editTableFoot : null"
          [nzData]="discountTable">
          <thead>
            <tr>
              <th nzAlign="center">{{[3, 4].includes(formParams.type) ? '>=件数' : '>=金额'}}</th>
              <!-- 多件折扣3 or 阶梯折扣6 -->
              <ng-container *ngIf="[3, 6].includes(formParams.type)">
                <th nzAlign="center">折扣率</th>
                <th nzAlign="center">最多减免</th>
              </ng-container>
              <!-- 多件立减4 or 阶梯满减5 -->
              <ng-container *ngIf="[4, 5].includes(formParams.type)">
                <th nzAlign="center">减免</th>
              </ng-container>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of editRowTable.data; let index = index;">
              <td nzAlign="center">
                <ng-container *ngIf="[3, 4].includes(formParams.type); else elsedylTemplate">
                  <!-- 件数 -->
                  <nz-input-number
                    [nzMin]="limitMinInput(index)"
                    [nzMax]="limitMaxInput(index)"
                    [nzStep]="1"
                    [nzPrecision]="0"
                    [(ngModel)]="data.number"
                  ></nz-input-number>
                </ng-container>
                <ng-template #elsedylTemplate>
                  <!-- 金额 -->
                  <nz-input-number
                    [nzMin]="limitMinInput(index)"
                    [nzMax]="limitMaxInput(index)"
                    [nzStep]="1"
                    [nzPrecision]="0"
                    [(ngModel)]="data.orderLimitMoney"
                  ></nz-input-number>
                </ng-template>
              </td>

              <!-- 多件折扣3 or 阶梯折扣6 -->
              <ng-container *ngIf="[3, 6].includes(formParams.type)">
                <td nzAlign="center">
                  <nz-input-number
                    [nzMin]="0.1"
                    [nzMax]="9.9"
                    [nzStep]="1"
                    [nzPrecision]="1"
                    [(ngModel)]="data.discountRate"
                  ></nz-input-number>
                </td>
                <td nzAlign="center">
                  <nz-input-number
                    [nzMin]="1"
                    [nzMax]="100000"
                    [nzStep]="1"
                    [nzPrecision]="0"
                    [(ngModel)]="data.maxReduction"
                  ></nz-input-number>
                </td>
              </ng-container>

              <!-- 多件立减4 or 阶梯满减5 -->
              <ng-container *ngIf="[4, 5].includes(formParams.type)">
                <td nzAlign="center">
                  <nz-input-number
                    [nzMin]="1"
                    [nzMax]="10000"
                    [nzPrecision]="0"
                    [nzStep]="1"
                    [(ngModel)]="data.reduction"
                  ></nz-input-number>
                </td>
              </ng-container>
              <td nzAlign="center">
                <a nz-button nzType="link" nzDanger (click)="deleteDiscountItem(index)">删除</a>
              </td>
            </tr>
          </tbody>
          <ng-template #editTableFoot>
            <div nz-row nzJustify="center">
              <button nz-button nzType="link" (click)="addDiscountItem(formParams.type)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                添加
              </button>
            </div>
          </ng-template>
        </nz-table>
      </nz-form-control>
    </nz-form-item>
    <!-- ************************************** 优惠内容 折扣 or 立减 ************************************** -->
  </div>

  <nz-divider></nz-divider>

  <!-- 范围设置 -->
  <p class="title-p">范围设置</p>
  <div class="addedit-item">
    <!-- 参与人限制 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>参与人限制</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.userType">
          <label nz-radio nzValue="0">不限制</label>
          <label nz-radio nzValue="2">b端用户</label>
          <label nz-radio nzValue="1">c端用户</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <!-- 活动生效时间 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>活动生效时间</nz-form-label>
      <nz-form-control nz-col nzFlex="500px">
        <nz-range-picker
          [nzShowTime]="true"
          [(ngModel)]="activityTimes"
          (ngModelChange)="timeChange($event)">
        </nz-range-picker>
        <i
          class="tip-i"
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          nz-tooltip
          nzTooltipPlacement="right"
          nzTooltipTitle="生效时间内，前端才会展示该活动"
        ></i>
      </nz-form-control>
    </nz-form-item>

    <!-- 优惠叠加 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px">优惠叠加</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="changeSuper($event)">
          <div nz-row>
            <div nz-col>
              <ng-container *ngFor="let item of superPositions">
                <label nz-checkbox [nzValue]="item.value" [ngModel]="item.checked">{{ item.label }}</label>
              </ng-container>
            </div>
          </div>
        </nz-checkbox-wrapper>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <!-- 皮肤设置 -->
  <p class="title-p">皮肤设置</p>
  <div class="addedit-item">
    <nz-form-item>
      <nz-form-label nzFlex="120px" nzRequired>参数配置</nz-form-label>
      <nz-form-control nzFlex="420px">
        <nz-table
          nzTemplateMode
          nzBordered
          nzSize="small">
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="100px"></th>
              <th nzAlign="center">竖版（手机端）</th>
              <th nzAlign="center">横版（PC端等）</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td nzAlign="center">背景色</td>
              <td nzAlign="center">
                <!-- WAP -->
                <div class="flex-wrap">
                  <input nz-input [(ngModel)]="formParams.skinBgColor" />
                  <span
                    [ngStyle]="{'background': formParams.skinBgColor}"
                    class="set-bg-sp"
                  ></span>
                </div>
              </td>
              <td nzAlign="center">
                <!-- PC -->
                <div class="flex-wrap">
                  <input nz-input [(ngModel)]="formParams.skinBgColorPc" />
                  <span
                    [ngStyle]="{'background': formParams.skinBgColorPc}"
                    class="set-bg-sp"
                  ></span>
                </div>
              </td>
            </tr>
            <tr>
              <td nzAlign="center">顶图</td>
              <td nzAlign="center">
                <!-- WAP -->
                <div class="set-flex-img">
                  <zdy-upload
                    [(ngModel)]="formParams.skinTopImage"
                  ></zdy-upload>
                </div>
              </td>
              <td nzAlign="center">
                <!-- PC -->
                <div class="set-flex-img">
                  <zdy-upload
                    [(ngModel)]="formParams.skinTopImagePc"
                  ></zdy-upload>
                </div>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </nz-form-control>
    </nz-form-item>

    <!-- 筛选排序 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>筛选排序</nz-form-label>
      <nz-form-control nz-col nzFlex="60%">
        <nz-radio-group [(ngModel)]="formParams.isFilterSort">
          <label nz-radio [nzValue]="0">不开启</label>
          <label nz-radio [nzValue]="1">开启</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <!-- 适用商品 -->
  <p class="title-p">适用商品 <span>默认所有商品都不可用，请在下方添加可用的内容</span></p>
  <div class="addedit-item">
    <!-- 指定分类 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>指定分类</nz-form-label>
      <nz-form-control nz-col nzFlex="60%">
        <div class="checkbox-btns">
          <label nz-checkbox [(ngModel)]="classifyAllChecked" (ngModelChange)="classifyListSelect(0)">全选</label>
          <label nz-checkbox [(ngModel)]="classifyNotChecked" (ngModelChange)="classifyListSelect(1)">全不选</label>
        </div>
        <div class="fication-group-box" *ngFor="let item of classifyLists">
          <label class="group-box-label">{{ item.label }}：</label>
          <nz-checkbox-group
            [(ngModel)]="item.children"
            [nzDisabled]="classifyNotChecked"
            (ngModelChange)="classifySingleChecked()"
          ></nz-checkbox-group>
        </div>
      </nz-form-control>
    </nz-form-item>
    <!-- 指定品牌 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px" nzRequired>指定品牌</nz-form-label>
      <nz-form-control nz-col nzFlex="60%">
        <div class="checkbox-btns">
          <label nz-checkbox [(ngModel)]="brandAllChecked" (ngModelChange)="branListSelect(0)">全选</label>
          <label nz-checkbox [(ngModel)]="brandNotChecked" (ngModelChange)="branListSelect(1)">全不选</label>
        </div>
        <div class="checkbox-box">
          <nz-checkbox-group
            [(ngModel)]="brandLists"
            [nzDisabled]="brandNotChecked"
            (ngModelChange)="brandSingleChecked()"
          ></nz-checkbox-group>
        </div>
      </nz-form-control>
    </nz-form-item>
    <!-- 追加可用商品 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px">追加可用商品</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <span>已选 {{ addAvailableLists?.length }} 个商品</span>
        <button nz-button nzType="link" [disabled]="!addAvailableLists?.length" (click)="previewGoodsModel(0)">点击查看
        </button>
        <button
          nz-button
          nzType="link"
          [disabled]="addAvailableDisabled"
          (click)="selectGoodsModel(0, addAvailableLists, excludeAvailableLists)"
        >选择更多</button>
        <i
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          nz-tooltip
          nzTooltipPlacement="right"
          nzTooltipTitle="可以在指定品牌和分类之外，再指定部分商品参予优惠"
        ></i>
      </nz-form-control>
    </nz-form-item>
    <!-- 排除可用商品 -->
    <nz-form-item>
      <nz-form-label nz-col nzFlex="120px">排除可用商品</nz-form-label>
      <nz-form-control nz-col nzFlex="400px">
        <span>已选 {{ excludeAvailableLists.length }} 个商品</span>
        <button
          nz-button
          nzType="link"
          [disabled]="!excludeAvailableLists.length"
          (click)="previewGoodsModel(1)"
        >点击查看</button>
        <button
          nz-button
          nzType="link"
          (click)="selectGoodsModel(1, excludeAvailableLists, addAvailableLists)"
        >选择更多</button>
        <i
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          nz-tooltip
          nzTooltipPlacement="right"
          nzTooltipTitle="可以在指定品牌和分类之内，去掉部分商品不参予优惠"
        ></i>
      </nz-form-control>
    </nz-form-item>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="routerParams.type == 0 || routerParams.type == 2 || formParams.status == 5"
      nz-button
      nzType="primary"
      [nzLoading]="releaseLoading"
      class="m-r-10"
      (click)="releaseData()"
    >发布</button>

    <button
      nz-button
      nzType="default"
      [nzLoading]="conserveLoading"
      class="m-r-10"
      (click)="subData(1)"
    >保存</button>

    <button
      nz-button
      nzType="dashed"
      (click)="goBack()"
    >返回</button>
  </div>
</nz-card>

<!-- model START -->
<nz-modal
  [nzWidth]="1100"
  [(nzVisible)]="isSelectVisible"
  nzTitle="选择商品"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()">
  <ng-container *nzModalContent>
    <div nz-space class="seach-wrap">
      <div *nzSpaceItem class="sech-item">
        <label>商品</label>
        <input nz-input placeholder="请输入商品编号或名称" [(ngModel)]="modelTableForms.name"/>
      </div>
      <button *nzSpaceItem nz-button nzType="primary" (click)="queryTbale()">查询</button>
      <button *nzSpaceItem nz-button nzType="primary" (click)="relationData()">关联已选商品({{ setOfCheckedId.size }})
      </button>
    </div>

    <!-- Table -->
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="modelTableForms.tableLoading"
        [nzData]="modelGoodsTable"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="modelTableForms.total"
        [nzPageIndex]="modelTableForms.page"
        [nzPageSize]="modelTableForms.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
        (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
      >
        <thead>
        <tr>
          <th
            nzWidth="100px"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="center">商品</th>
          <th nzAlign="center" nzWidth="150px">库存</th>
          <th nzAlign="center" nzWidth="150px">销量</th>
          <th nzAlign="center" nzWidth="120px">适用用户</th>
        </tr>
        </thead>

        <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td
            nzAlign="center"
            [nzChecked]="setOfCheckedId.has(data.id)"
            [nzDisabled]="data.disabled"
            (nzCheckedChange)="onItemChecked(data.id, $event, data)">
          </td>
          <td nzAlign="center">
            <div class="goods-info">
              <img
                nz-image
                width="45px"
                height="45px"
                [nzSrc]="data.icon"
                [nzFallback]="fallback"
                alt=""
              />
              <p class="goods-info-p">
                <span>{{ data.name || '-' }}</span>
                <span>{{ data.code }}</span>
              </p>
            </div>
          </td>
          <td nzAlign="center">{{ data.stockNum }}</td>
          <td nzAlign="center">{{ data.salesVolume }}</td>
          <td nzAlign="center">
            <div [ngSwitch]="data.userType">
              <nz-tag *ngSwitchCase="0">通用</nz-tag>
              <nz-tag [nzColor]="'#87d068'" *ngSwitchCase="1">C端</nz-tag>
              <nz-tag [nzColor]="'#2db7f5'" *ngSwitchCase="2">B端</nz-tag>
              <span *ngSwitchDefault>-</span>
            </div>
          </td>
        </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ modelTableForms.total }} 条</ng-template>
    </div>
  </ng-container>
</nz-modal>
<!-- model END -->

<!-- 查看已选商品model START -->
<nz-modal
  [nzWidth]="1100"
  [(nzVisible)]="isPreiviewVisible"
  nzTitle="查看已选商品"
  [nzFooter]="null"
  (nzOnCancel)="handleCancelTwo()">
  <ng-container *nzModalContent>
    <nz-table
      #rowSelectionTable
      nzShowPagination
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      nzSize="small"
      [nzData]="preiviewTableData"
      [nzFrontPagination]="false"
      [nzHideOnSinglePage]="true"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="preiviewTableForm.total"
      [nzPageIndex]="preiviewTableForm.page"
      [nzPageSize]="preiviewTableForm.pageSize"
      (nzPageIndexChange)="onPageIndexChangeTwo($event)"
      (nzPageSizeChange)="onPageSizeChangeTwo($event)"
    >
      <thead>
      <tr>
        <th nzAlign="center" nzWidth="651px">商品</th>
        <th nzAlign="center">库存</th>
        <th nzAlign="center">销量</th>
        <th nzAlign="center">适用用户</th>
        <th nzAlign="center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of preiviewTableData; let index = index;">
        <td nzAlign="center">
          <div class="goods-info">
            <img nz-image width="45px" height="45px" [nzSrc]="data.icon" [nzFallback]="fallback" alt=""/>
            <p class="goods-info-p">
              <span>{{ data.name || '-' }}</span>
              <span>{{ data.code }}</span>
            </p>
          </div>
        </td>
        <td nzAlign="center">{{ data.stockNum }}</td>
        <td nzAlign="center">{{ data.salesVolume }}</td>
        <td nzAlign="center">
          <div [ngSwitch]="data.userType">
            <nz-tag *ngSwitchCase="0">通用</nz-tag>
            <nz-tag [nzColor]="'#87d068'" *ngSwitchCase="1">C端</nz-tag>
            <nz-tag [nzColor]="'#2db7f5'" *ngSwitchCase="2">B端</nz-tag>
            <span *ngSwitchDefault>-</span>
          </div>
        </td>
        <td nzAlign="center">
          <a
            nz-button
            nzType="text"
            nzDanger
            nz-popconfirm
            nzPopconfirmTitle="确定删除?"
            [nzIcon]="iconTpl"
            (nzOnConfirm)="deleteItem(data, index)">
            删除
          </a>
          <ng-template #iconTpl>
            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
          </ng-template>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-container>
</nz-modal>
<!-- 查看已选商品model END -->
